<template>
  <div class="dashboard-container">
    <div class="box-line">
      <div v-for="(item, index) in line1" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>

    <div class="box-line">
      <div v-for="(item, index) in line2" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>

    <div class="box-line">
      <div v-for="(item, index) in line3" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>

    <div class="box-line">
      <div v-for="(item, index) in line4" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>

    <div class="box-line">
      <div v-for="(item, index) in line5" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>

    <div class="box-line">
      <div v-for="(item, index) in line6" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
// import { Sidebar } from '@/layout/components/index'
import Sidebar from "@/layout/components/Sidebar/index.vue";
import NavMenu from "@/components/NavMenu.vue";

export default {
  name: "Dashboard",
  components: {
    Sidebar,
    NavMenu,
  },
  // computed: {
  //   ...mapGetters(["name"]),
  // },
  data() {
    return {
      line1: [
        {
          title: "财务工作台",
          text: [{ title: "财务看板", link: "/kanban" }],
        },
        {
          title: "基础配置",
          text: [
            { title: "出港结算关系配置", link: "/relationship" },
            { title: "出港结算参数维护", link: "/maintenance" },
            { title: "出港拉均配置", link: "/pulleven" },
            { title: "科目配置", link: "/subjects" },
            { title: "出港自动导出配置", link: "/export" },
            { title: "客户配置", link: "/userSetting" },
            // "出港结算关系配置", "出港结算参数维护",'出港拉均配置','科目配置','出港自动导出配置'
          ],
        },
      ],
      line2: [
        {
          title: "出港结算",
          text: [
            { title: "出港发件费结算", link: "/shippingFee" },
            { title: "包仓费其他费用结算", link: "/package" },
            { title: "客户账单管理", link: "/bill" },
            { title: "网点揽收分润账单", link: "/pickup" },
            { title: "出港报价中心", link: "/quote" },
            { title: "面单费报价", link: "/faceSheet" },
            { title: "面单费补收", link: "/collection" },
            { title: "代业务员对客户结算", link: "/settlement" },
          ],
          // text: [
          //   "出港发件费结算",
          //   "包仓费其他费用结算",
          //   "客户账单管理",
          //   "网点揽收分润账单",
          //   "出港报价中心",
          //   "面单费报价",
          //   "面单费补收",
          //   "代业务员对客户结算",
          // ],
        },
      ],
      line3: [
        {
          title: "进港结算",
          text: [
            { title: "派费结算", link: "/dispatchFee" },
            { title: "进港派费结算", link: "/Incoming" },
            { title: "派费直达管理", link: "/direct" },
          ],
          // text: ["派费结算", "进港派费结算",'派费直达管理'],
        },
        {
          title: "考核结算",
          text: [{ title: "奖罚分摊结算", link: "/reward" }],
          // text: ["奖罚分摊结算", "考核分摊结算"],
        },
      ],
      line4: [
        {
          title: "资金管理",
          text: [
            { title: "站点预付款", link: "/site" },
            { title: "总部预付款", link: "/headquarters" },
          ],
          // text: ["站点预付款", "总部预付款",'站点预付款'],
        },
        {
          title: "成本管理",
          text: [
            { title: "承/业工资表", link: "/Inheritance" },
            { title: "职能/其他人员工资表", link: "/Functions" },
            { title: "固定费用录入", link: "/fixed" },
          ],
          // text: ["承/业工资表", "职能/其他人员工资表",'固定费用录入'],
        },
      ],
      line5: [
        {
          title: "经营报表",
          text: [
            { title: "人效统计分析", link: "/humanEffect" },
            // { title: '客户经营', link: '/fixed' }
          ],
          // text: ["人效统计分析", "客户经营"],
        },
        {
          title: "运营能力分析",
          text: [
            { title: "出港流向结构分析", link: "/Flow" },
            { title: "承/业流向结构分析", link: "/structure" },
            { title: "客户流向结构分析", link: "/client" },
            { title: "区域收入分析", link: "/region" },
          ],
          // text: ["出港流向结构分析", "承/业流向结构分析",'客户流向结构分析','区域收入分析'],
        },
      ],
      line6: [
        {
          title: "数据对比",
          text: [
            { title: "重量差异报表", link: "/weight" },
            { title: "包重差异报表", link: "/packageWeight" },
          ],
          // text: ["重量差异报表", "包重差异报表"],
        },
        {
          title: "对账中心",
          text: [{ title: "承/业对账中心", link: "/ReconciliationCenter" }],
          // text: ["承/业对账中心"],
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-left: 210px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-flow: column;
  margin: 30px 0px 40px 40px;

  th {
    color: #333;
    font-size: 20px;
    font-weight: normal;
  }

  td {
    margin: 10px 0 10px 0;
    color: #666;
    font-size: 18px;
  }
}

.line {
  height: 1px;
  color: #9999;
  background: #9999;
  width: 216px;
  margin: 10px 0px 10px 0;
  margin-left: 20px;
}
</style>
